<template>
  <div class="container">
    <!-- gutter指定每一行的间隔 -->
    <el-row :gutter="20">
      <!-- 搜索框 -->
      <el-col :span="6">
        <div class="grid-content bg-purple input">
          <el-input
            placeholder="请搜索车牌"
            v-model="selectContent"
            size="10"
            clearable
          >
          </el-input>
        </div>
      </el-col>
      <el-col :span="18">
        <!-- 查询按钮 -->
        <el-col :span="2.5">
          <div class="grid-content bg-purple">
            <el-button
              type="primary"
              plain
              icon="el-icon-search"
              @click="select()"
              >查询</el-button
            >
          </div>
        </el-col>
        <!-- 导出文件 -->
        <el-col :span="2.5">
          <download-excel
            :data="tableData"
            :fields="json_fields"
            type="xlsx"
            worksheet="My Worksheet"
            name="停车信息.xls"
          >
            <el-button type="primary" plain icon="el-icon-download"
              >导出</el-button
            >
          </download-excel>
        </el-col>
      </el-col>
    </el-row>
    <!-- 分割线 -->
    <el-divider></el-divider>
    <div class="table">
      <el-table
        :data="tableData"
        stripe
        style="width: 100%"
        class="table"
        height="500"
        max-height="500"
        highlight-current-row
        :header-row-style="getRowClass"
        :header-cell-style="getRowClass"
        id="out_table"
      >
        <el-table-column
          prop="status"
          label="状态"
          width="180"
          :filters="[
            { text: '入库', value: '入库' },
            { text: '出库', value: '出库' },
          ]"
          :filter-method="filterTag"
          filter-placement="bottom-end"
        >
          <template slot-scope="scope">
            <div
              slot="reference"
              class="name-wrapper"
              v-if="scope.row.status === '出库'"
            >
              <el-tag size="medium" type="success">{{
                scope.row.status
              }}</el-tag>
            </div>
            <div slot="reference" class="name-wrapper" v-else>
              <el-tag size="medium">{{ scope.row.status }}</el-tag>
            </div>
          </template>
        </el-table-column>
        <el-table-column
          prop="startTime"
          label="停车开始时间"
          width="180"
          sortable
        >
        </el-table-column>
        <el-table-column
          prop="overTime"
          label="停车结束时间"
          width="180"
          sortable
        >
        </el-table-column>
        <el-table-column prop="money" label="停车费"> </el-table-column>
        <el-table-column prop="carId" label="车牌"> </el-table-column>
        <el-table-column prop="carPlace" label="停车位"> </el-table-column>
        <!-- 编辑 删除操作 -->
        <el-table-column label="操作">
          <template slot-scope="scope">
            <el-button
              size="mini"
              icon="el-icon-edit"
              circle
              @click="handleEdit(scope.$index, scope.row)"
            ></el-button>
            <el-button
              size="mini"
              type="danger"
              icon="el-icon-delete"
              circle
              @click="handleDelete(scope.$index, tableData)"
            ></el-button>
          </template>
        </el-table-column>
      </el-table>
    </div>
    <!-- 底部添加按钮 -->
    <div class="addbtn">
      <el-button
        type="primary"
        icon="el-icon-plus "
        circle
        @click="dialogFormVisible = true"
      ></el-button>
    </div>

    <!-- 添加停车信息 -->
    <el-dialog title="停车信息" :visible.sync="dialogFormVisible">
      <el-form :model="form">
        <el-form-item label="停车状态" :label-width="formLabelWidth">
          <el-select v-model="form.status" placeholder="请选择停车状态">
            <el-option label="入库" value="入库"></el-option>
            <el-option label="出库" value="出库"></el-option>
          </el-select>
        </el-form-item>

        <el-form-item label="入库时间" :label-width="formLabelWidth">
          <el-date-picker
            v-model="form.startTime"
            type="datetime"
            placeholder="选择日期时间"
            align="right"
            :picker-options="pickerOptions"
            value-format="yyyy/MM/dd HH:MM:SS"
          >
          </el-date-picker>
        </el-form-item>

        <el-form-item label="出库时间" :label-width="formLabelWidth">
          <el-date-picker
            v-model="form.overTime"
            type="datetime"
            placeholder="选择日期时间"
            align="right"
            :picker-options="pickerOptions"
            value-format="yyyy/MM/dd HH:MM:SS"
          >
          </el-date-picker>
        </el-form-item>

        <el-form-item label="停车费" :label-width="formLabelWidth">
          <el-input v-model="form.money" autocomplete="off"></el-input>
        </el-form-item>

        <el-form-item label="车牌" :label-width="formLabelWidth">
          <el-input v-model="form.carId" autocomplete="off"></el-input>
        </el-form-item>

        <el-form-item label="车位" :label-width="formLabelWidth">
          <el-input v-model="form.carPlace" autocomplete="off"></el-input>
        </el-form-item>
      </el-form>

      <!-- 底部 确定取消 -->
      <div slot="footer" class="dialog-footer">
        <el-button @click="dialogFormVisible = false">取 消</el-button>
        <el-button type="primary" @click="add()">确 定</el-button>
      </div>
    </el-dialog>

    <!-- 停车信息修改 -->
    <el-dialog title="停车信息修改" :visible.sync="dialogFormVisible1">
      <el-form :model="form">
        <el-form-item label="停车状态" :label-width="formLabelWidth">
          <el-select v-model="form.status" placeholder="请选择停车状态">
            <el-option label="入库" value="入库"></el-option>
            <el-option label="出库" value="出库"></el-option>
          </el-select>
        </el-form-item>

        <el-form-item label="入库时间" :label-width="formLabelWidth">
          <el-date-picker
            v-model="form.startTime"
            type="datetime"
            placeholder="选择日期时间"
            align="right"
            :picker-options="pickerOptions"
            value-format="yyyy/MM/dd HH:MM:SS"
          >
          </el-date-picker>
        </el-form-item>

        <el-form-item label="出库时间" :label-width="formLabelWidth">
          <el-date-picker
            v-model="form.overTime"
            type="datetime"
            placeholder="选择日期时间"
            align="right"
            :picker-options="pickerOptions"
            value-format="yyyy/MM/dd HH:MM:SS"
          >
          </el-date-picker>
        </el-form-item>

        <el-form-item label="停车费" :label-width="formLabelWidth">
          <el-input v-model="form.money" autocomplete="off"></el-input>
        </el-form-item>

        <el-form-item label="车牌" :label-width="formLabelWidth">
          <el-input v-model="form.carId" autocomplete="off"></el-input>
        </el-form-item>

        <el-form-item label="车位" :label-width="formLabelWidth">
          <el-input v-model="form.carPlace" autocomplete="off"></el-input>
        </el-form-item>
      </el-form>

      <!-- 底部 确定取消 -->
      <div slot="footer" class="dialog-footer">
        <el-button @click="dialogFormVisible1 = false">取 消</el-button>
        <el-button type="primary" @click="update()">确 定</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import Axios from "axios";
export default {
  data() {
    return {
      //搜索框内容
      selectContent: "",
      // 修改索引
      index: 0,
      //   表格数据
      tableData: [],
      tableDataClear: [],
      //日历选项
      pickerOptions: {
        shortcuts: [
          {
            text: "今天",
            onClick(picker) {
              picker.$emit("pick", new Date());
            },
          },
          {
            text: "昨天",
            onClick(picker) {
              const date = new Date();
              date.setTime(date.getTime() - 3600 * 1000 * 24);
              picker.$emit("pick", date);
            },
          },
          {
            text: "一周前",
            onClick(picker) {
              const date = new Date();
              date.setTime(date.getTime() - 3600 * 1000 * 24 * 7);
              picker.$emit("pick", date);
            },
          },
        ],
      },
      //   dialog信息
      dialogFormVisible: false,
      dialogFormVisible1: false,
      form: {
        PId:0,
        status: "",
        startTime: "",
        overTime: "",
        money: 0,
        carId: "",
        carPlace: "",
      },
      formClear: {
        PId:0,
        status: "",
        startTime: "",
        overTime: "",
        money: 0,
        carId: "",
        carPlace: "",
      },

      formLabelWidth: "80px",

      // 导出数据
      json_fields: {
        状态: "status",
        停车开始时间: "startTime",
        停车结束时间: "overTime",
        停车费: "money",
        车牌号: "carId",
        停车位: "carPlace",
      },
    };
  },
  methods: {
    // update
    handleEdit(index, row) {
      // console.log(index, row);
      this.dialogFormVisible1 = true;
      this.form = row;
      this.index = index;
    },
    update() {
      this.dialogFormVisible1 = false;
      this.tableData[this.index] = this.form;
      //修改数据库中的信息
      Axios.put("http://localhost:8080/do/parkRecord",this.form)
      this.$message({
        message: "修改成功",
        type: "success",
        center: true,
      });
      this.form = this.formClear;
    },
    // delete
    handleDelete(index, rows) {
      // console.log(index);
      // console.log(rows, index, rows[index], rows[index].pid);

      //confirm打开消息提示
      this.$confirm("此操作将永久删除该条信息, 是否继续?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      })
        .then(() => {
          this.$message({
            type: "success",
            message: "删除成功!",
            center: true,
          });
          console.log(rows[index].pid);
          // 执行数据库删除
          Axios.delete("http://localhost:8080/do/parkRecord", {
            params: { id: rows[index].pid },
          });
          rows.splice(index, 1);
        })
        .catch(() => {
          this.$message({
            type: "info",
            message: "已取消删除",
            center: true,
          });
        });
    },
    // add停车信息
    add() {
      this.dialogFormVisible = false;
      //   console.log(this.form.carId);
      this.tableData.unshift(this.form);
      //在数据库中添加停车信息
      Axios.post("http://localhost:8080/do/parkRecord",this.form);

      this.form = this.formClear;

      this.$message({
        message: "添加成功",
        type: "success",
        center: true,
      });
    },
    // select
    select() {
      // console.log('select');
      if (this.selectContent === "") {
        this.tableData = this.tableDataClear;
        return;
      }
      console.log("object");
      this.tableData = this.tableDataClear.filter(
        (item) => item.carId.indexOf(this.selectContent) !== -1
      );
      this.selectContent = "";
    },
    filterTag(value, row) {
      return row.status === value;
    },

    getRowClass({ row, column, rowIndex, columnIndex }) {
      return "background:#f0f2f5;";
    },
  },
  // 请求数据
  async created() {
    //查询所有数据
    const { data } = await Axios.get("http://localhost:8080/do/parkRecord");
    this.tableData = data;
    this.tableDataClear = data;
    // console.log(data);
  },
};
</script>

<style scoped>
.container {
  /* background-color:white; */
}
.table {
  background-color: #f0f2f5;
}

.el-row {
  margin-left: 10px;
  margin-top: 20px;
  margin-bottom: 20px;
}
.el-row:last-child {
  margin-bottom: 0;
}
.el-col {
  border-radius: 4px;
}
.bg-purple-dark {
  background: #99a9bf;
}
.bg-purple {
  /* background: #d3dce6; */
}
.bg-purple-light {
  background: #e5e9f2;
}
.grid-content {
  border-radius: 4px;
  min-height: 36px;
}
.row-bg {
  padding: 10px 0;
  background-color: #f9fafc;
}
.addbtn {
  margin-top: 12px;
  margin-left: 15px;
}
.el-table th.gutter {
  background-color: #f0f2f5;
}
</style>
